<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="con" /><br><br>
    <button onclick="saveData()">存储数据</button>
    <button onclick="getData()">获取数据</button>
    <button onclick="delData()">删除数据</button>
    <button onclick="delAllData()">清除数据</button>


    <script>
        //存储数据  存 10M
        //  同一个浏览器的同一个网站的不同页面可以访问   localStorage。同源策略

        function saveData(){
            let con = document.getElementById('con').value;
            //本地存储的数据只能存字符串
            let num = {
                uname:"张三",
                age:18
            };
            sessionStorage.setItem("username",JSON.stringify(num));
        }  
        
        //获取数据
        function getData(){
            alert(JSON.parse(sessionStorage.getItem("abc")));
        }

        // 删除某个数据
        function delData(){
            sessionStorage.removeItem("username");
        }

        //清空数据
        function delAllData(){
            sessionStorage.clear();
        }



    </script>
</body>
</html>